/*
   如果需要底部多按钮，则使用这个样式
    <template #confirm="{ config }">
        <view class="btns-bar">
          <view class="btns-item" @click="refCommonPopup.close('cancel')">
            <text class="btns-item-txt"> 取消 </text>
          </view>
          <view class="btns-item confirm" @click="popupConfirm(config)">
            <text class="btns-item-txt"> 确定 </text>
          </view>
        </view>
    </template>
*/
.btns-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20rpx;

  .bar-item {
    font-size: 8rpx;
    background-color: #efefef;
    padding: 5rpx 10rpx;
    border-radius: 3rpx;
  }
}

.btns-item {
  background-color: #efefef;
  padding: 5rpx 20rpx;
  border-radius: 5rpx;
  margin: 0rpx 15rpx;
  font-size: 12rpx;
  display: flex;
  align-items: center;

  &.confirm {
    color: white;
    background-color: red;
    display: flex;
    flex-direction: row;
  }

  &.loading {
    opacity: 0.5;
  }

  &.disabled {
    opacity: 0.5;
    filter: grayscale(0.8);
  }

  .btns-item-txt {
    font-size: 10rpx;
    padding: 5rpx 15rpx;
    white-space: nowrap;
  }

  ::v-deep .u-button {
    padding: 2rpx 20rpx;
  }
}